<template>
  <div class="main">
    <nav>
      <!--      <router-link to="/home">首页</router-link>
            <router-link to="/film">电影</router-link>
            <router-link to="/about">关于</router-link>
            <router-link to="/user/1">用户1</router-link>
            <router-link to="/user/2">用户2</router-link>
            <router-link to="/user/jack/posts/3">用户3</router-link>-->
      <router-link to="/">首页</router-link>
      <router-link to="/movie" replace>电影</router-link>
      <router-link to="/about">关于</router-link>
      <router-link to="/film">影视</router-link>
      <router-link to="/login" @click="logout">登出</router-link>
    </nav>
    <section>
      <router-view></router-view>
    </section>
    <button @click="navClick">编程式导航</button>
    <button @click="goBack">上一页</button>
    <button @click="goForward">下一页</button>
  </div>
</template>

<script setup>
import {useRouter, useRoute} from "vue-router"

const router = useRouter()
const route = useRoute()

const navClick = () => {
  // 字符串路径
  // router.push("/movie/100");
  // 带有路径的对象
  // router.push({path: "/movie/200"});
  // 命名的路由，并加上参数，让路由建立url params已经弃用
  // router.push({name: "user", query: {name: "Eureka"}});
  // 带查询参数，结果是 /movie?plan=private
  // router.push({path: "/movie", query: {name: "private"}});
  // 带hash，结果是/about#team
  router.push({path: "/about", hash: "#team", replace: true});
}

const goBack = () => {
  // router.go(-1);
  // router.go(100);
  router.back();
}

const goForward = () => {
  // router.go(1);
  router.forward();
}

// 退出系统
const logout = () => {
  localStorage.setItem("ACCESS_TOKEN", "")
}

</script>

<style scoped>
.main {
  width: 400px;
  border: 2px solid #999;
  border-radius: 10px;
  padding: 20px;
}

.main a {
  color: #00f;
  text-decoration: none;
  font-size: 16px;
  margin-right: 10px;
}

.main a:hover {
  color: orangered;
}

.main nav {
  border-bottom: 2px solid #999;
  height: 46px;
  line-height: 46px;
}

section {
  min-height: 500px;
  margin: 0;
}
</style>